<template>
  <div class="etc-wrapper">
    <div class="etc-01-wrap" :style="{backgroundImage:'url(' + ectbanner+ ')'}">
      <div class="etc-01-text-wrap">
        <div class="etc-01-text-title">业务入口</div>
        <div class="etc-01-text-item">BUSINESS ENTRANCE</div>
      </div>
    </div>
    <div class="etc-02-wrap">
      <div class="etc-02-01-wrap">
        <div class="etc-02-01img-title">首页 > 学员就业及人才服务</div>
        <div class="etc-02-01img" :style="{backgroundImage:'url(' + ectbanner02+ ')'}">
          <div class="etc-02-01img-text" >
            <div class="etc-02-01img-text01">
              <span class="etc-02-01img-text01-01">就业中心</span>
              <div class="etc-02-01img-text01-02">去看看>></div>
            </div>
            <div class="etc-02-01img-text02"></div>
            <div class="etc-02-01img-text03">
              <span class="etc-02-01img-text01-01">人才服务</span>
              <div class="etc-02-01img-text01-02">去看看>></div>
            </div>
          </div>
        </div>
      </div>
      <div class="etc-02-02-wrap">
          <div class="etc-02-02-title">
              <span>岗位信息</span>
              <span class="etc-02-02-title-02">人才简历</span>
          </div>
          <div  class="etc-02-02-list">
              <div class="etc-02-02-list-01">
                  <div class="etc-02-02-list-01-text">
                      <div class="etc-02-02-list-01-text-ifm">
                          <div class="etc-02-02-list-01-text-ifm1">高级运维工程师</div> 
                          <div class="etc-02-02-list-01-text-ifm2">上海<span class="etc-02-02-list-01-text-ifm21"></span>3-5年<span class="etc-02-02-list-01-text-ifm21"></span>大专</div> 
                      </div>
                      <div class="etc-02-02-list-01-text-apply">申请职位</div>
                  </div>
                   <div class="etc-02-02-list-01-text">
                      <div class="etc-02-02-list-01-text-ifm">
                          <div class="etc-02-02-list-01-text-ifm1">高级运维工程师</div> 
                          <div class="etc-02-02-list-01-text-ifm2">上海<span class="etc-02-02-list-01-text-ifm21"></span>3-5年<span class="etc-02-02-list-01-text-ifm21"></span>大专</div> 
                      </div>
                      <div class="etc-02-02-list-01-text-apply">申请职位</div>
                  </div>
                   <div class="etc-02-02-list-01-text">
                      <div class="etc-02-02-list-01-text-ifm">
                          <div class="etc-02-02-list-01-text-ifm1">高级运维工程师</div> 
                          <div class="etc-02-02-list-01-text-ifm2">上海<span class="etc-02-02-list-01-text-ifm21"></span>3-5年<span class="etc-02-02-list-01-text-ifm21"></span>大专</div> 
                      </div>
                      <div class="etc-02-02-list-01-text-apply">申请职位</div>
                  </div>
                   <div class="etc-02-02-list-01-text-last">
                      <div class="etc-02-02-list-01-text-ifm">
                          <div class="etc-02-02-list-01-text-ifm1">高级运维工程师</div> 
                          <div class="etc-02-02-list-01-text-ifm2">上海<span class="etc-02-02-list-01-text-ifm21"></span>3-5年<span class="etc-02-02-list-01-text-ifm21"></span>大专</div> 
                      </div>
                      <div class="etc-02-02-list-01-text-apply-last">申请职位</div>
                  </div>
              </div>
              <div class="etc-02-02-list-02">
                <div class="resume-wrap">
                  <div class="resume-list">
                    <span class="position">高级运维工程师</span>
                    <span class="preview">预览</span>
                  </div>
                  <div class="resume-list">
                    <span class="position">行政专员</span>
                    <span class="preview">预览</span>
                  </div>
                  <div class="resume-list">
                    <span class="position">高级运维工程师</span>
                    <span class="preview">预览</span>
                  </div>
                  <div class="resume-list">
                    <span class="position">高级运维工程师</span>
                    <span class="preview">预览</span>
                  </div>
                  <div class="resume-list-last">
                    <span class="position">行政专员</span>
                    <span class="preview">预览</span>
                  </div>
                </div>
              </div>
              <div class="etc-02-02-list-02"></div>
          </div>
      </div>
      <div class="etc-02-03-wrap">
        <div class="guide-wrap">
          <div class="guide-title">就业指导</div>
          <div class="guide-list">
            <div class="guide-list-content">
              <div class="guide-list-top">TOP</div>
              <span class="guide-list-text">上海市某政府机关2020年度公务员考录现场招聘会</span> 
              <span class="guide-list-data">2019-10-31</span>
            </div>
             <div class="guide-list-content">
              <div class="guide-list-top">TOP</div>
              <span class="guide-list-text">上海市某政府机关2020年度公务员考录现场招聘会</span> 
              <span class="guide-list-data">2019-10-31</span>
            </div>
             <div class="guide-list-content">
              <div class="guide-list-top">TOP</div>
              <span class="guide-list-text">上海市某政府机关2020年度公务员考录现场招聘会</span> 
              <span class="guide-list-data">2019-10-31</span>
            </div>
             <div class="guide-list-content">
              <span class="guide-list-text">求职贴士：笔试技巧知多少</span> 
              <span class="guide-list-data">2019-10-31</span>
            </div>
             <div class="guide-list-content">
              <span class="guide-list-text">简历投出去，很久没有反应怎么办？</span> 
              <span class="guide-list-data">2019-10-31</span>
            </div>
             <div class="guide-list-content">
              <span class="guide-list-text">注意！谈工资之前你需要了解的那些事！</span> 
              <span class="guide-list-data">2019-10-31</span>
            </div>
          </div>
        </div>
      </div>
       <div class="etc-02-04-wrap" :style="{backgroundImage:'url(' + bg04+ ')'}">
        <div class="cooperation">业务合作</div>
        <div class="advisory">QQ咨询<img src="./img/qqimg.png" class="qqimg"/></div>
       </div>
    </div>
  </div>
</template>
<script>
import ectbanner from "./img/ectbanner.jpg"
import ectbanner02 from "./img/ectbanner02.png"
import bg04 from "./img/bg04.png"
export default {
  data() {
    return {
      ectbanner: ectbanner,
      ectbanner02:ectbanner02,
      bg04:bg04,
    };
  },

  methods: {}
};
</script>
<style lang='stylus'>
.etc-01-wrap {
  padding-top: 140px;
  height: 480px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: relative;
}
.etc-01-text-wrap {
  margin-left: 120px;
}
.etc-01-text-title {
  font-family: MicrosoftYaHei;
  font-size: 28px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #f4f4f4;
}
.etc-01-text-item {
  font-family: Humanist521BT-Light;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 17px;
  letter-spacing: 0px;
  color: #c9c9c9;
  margin-top: 21px;
}
.etc-02-wrap {
  width: 100%;
  padding: 0 120px 0 120px;
}
.etc-02-01-wrap {
  width: 1200px;
  height: 422px;
  background-color: #ffffff;
  padding: 0 40px 0 40px;
  position: relative;
  margin-top: -133px;
}
.etc-02-01img {
  width: 1120px;
  height: 280px;
  background-color: #000000;
}
.etc-02-01img-title {
  font-family: MicrosoftYaHeiLight;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #666666;
  text-align: right;
}
.etc-02-01img-text01 {
  margin-left: 200px;
}
.etc-02-01img-text01-01 {
  font-family: MicrosoftYaHei;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #ffffff;
}
.etc-02-01img-text02 {
  width: 1px;
  height: 160px;
  background-color: #ffffff;
  margin-left: 240px;
  margin-right: 240px;
}
.etc-02-01img-text01-02 {
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 40px;
  letter-spacing: 0px;
  color: #ffffff;
}
.etc-02-01img-text {
  display: flex;
  text-align: center;
  align-items: center;
  padding-top: 60px;
}
.etc-02-01img-text01-02 {
  margin-top: 37px;
  width: 120px;
  height: 42px;
  border: solid 2px #f4f4f4;
}
.etc-02-01img-text01-02:hover {
  border: solid 2px #db0801;
  background-color: #db0801;
}
.etc-02-02-wrap{
    margin-top 20px;
     width: 1200px;
	height: 507px;
	background-color: #ffffff;
    padding : 41px 40px 0 40px;
}
.etc-02-02-title{
    display flex;
   	font-family: MicrosoftYaHei;
	font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 40px;
	letter-spacing: 0px;
	color: #1b1b1b;
}
.etc-02-02-title-02{
    margin-left:713px;
}
.etc-02-02-list{
  display flex
}
.etc-02-02-list-01{
  width: 786px;
	background-color: #ffffff;
	border: solid 1px #dcdcdc;
  padding:0 20px;
  margin-top 40px
}
.etc-02-02-list-01-text{
  display flex
  justify-content space-between
  text-align center
  align-items: center
  border-bottom dashed 1px #dcdcdc
}
.etc-02-02-list-01-text-ifm{
  text-align left 
}
.etc-02-02-list-01-text-ifm1{
 font-family: MicrosoftYaHei;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 40px;
	letter-spacing: 0px;
	color: #333333;
}
.etc-02-02-list-01-text-ifm2{
  font-family: MicrosoftYaHei;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #666666;
  margin-bottom 20px
}
.etc-02-02-list-01-text-ifm21{
  margin-left 18px
}
.etc-02-02-list-01-text-apply{
  width: 99px
	height: 36px
  text-align center
	background-color: #ff3343
  line-height 36px
  font-size: 14px
  color: #ffffff
}
.etc-02-02-list-01-text-apply:hover {
  background-color: #da0800
}
.etc-02-02-list-01-text-last{
  display flex
  justify-content space-between
}
.resume-wrap{
  margin-top 40px
  margin-left 40px
  width: 294px
	height: 329px
	background-color: #ffffff
	border: solid 1px #dcdcdc
  padding 24px 24px 0 20px
}
.resume-list{
  padding-top 13px
  display flex
  justify-content space-between
  border-bottom 1px dashed  #dcdcdc
}
.resume-list-last{
  padding-top 13px
  display flex
  justify-content space-between
}
.position{
  font-family: MicrosoftYaHei;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #333333;
}
.preview{
  width: 50px;
	height: 26px;
	background-color: #f4f4f4;
	border: solid 1px #cecece;
  font-family: MicrosoftYaHei;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 26px;
  text-align center;
	letter-spacing: 0px;
	color: #999999;
  margin-bottom 13px
}
.preview:hover{
  background-color: #e7e7e7;
	border: solid 1px #cecece;
}
.etc-02-02-list-01-text-apply-last{
  width: 99px
	height: 36px
  text-align center
	background-color: #ff3343
  line-height 36px
  font-size: 14px
  color: #ffffff
  margin-top 21px
}
.etc-02-02-list-01-text-apply-last:hover {
  background-color: #da0800
}
.etc-02-03-wrap{
  margin-top 20px;
  width: 1200px;
	height: 610px;
	background-color: #ffffff;
  padding 40px 40px
}
.guide-title{
  margin-bottom  41px
  font-family: MicrosoftYaHei;
	font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 40px;
	letter-spacing: 0px;
	color: #1b1b1b;
}
.guide-list{
  width: 1120px;
	height: 432px;
	background-color: #ffffff;
	border: solid 1px #dcdcdc;
  padding 0 20px 0 20px;
}
.guide-list-content{
  display flex
  align-items center
  border-bottom 1px dashed #dcdcdc
  margin-bottom 20px
  justify-content space-between
}
.guide-list-top{
  Width: 32px;
	height: 16px;
	background-color: #da0800;
	border-radius: 2px;
  font-family: ArialMT;
	font-size: 12px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #ffffff;
  line-height 16px
  text-align center
}
.guide-list-text{
  font-family: MicrosoftYaHei;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 40px;
	letter-spacing: 0px;
	color: #333333;
}
.guide-list-data{
  margin-left 586px
  font-family: MicrosoftYaHei;
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 40px;
	letter-spacing: 0px;
	color: #666666;
}
.etc-02-04-wrap{
  width: 1200px;
	height: 150px;
	background-color: #ff3343;
  display flex
}
.cooperation{
  width: 252px;
	height: 150px;
	background-color: #da0800;
  	font-family: MicrosoftYaHei;
	font-size: 28px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 150px;
	letter-spacing: 0px;
	color: #f4f4f4;
  text-align center;
}
.advisory{
  width: 166px;
	height: 50px;
	background-image: linear-gradient(90deg, #ec7781 0%,#f59195 50%, #ffb1ae 100%), 
	linear-gradient(#873741, #873741);
	background-blend-mode: normal;
  font-weight:800;
  position relative;
  margin-left:620px;
  margin-top:52px;
  font-family: MicrosoftYaHei-Bold;
  font-size: 16px;
  line-height:52px;
  letter-spacing: 0px;
  color: #da0800;
  padding 0 0px 10px 30px;
}
.qqimg{
  width: 38px;
	height: 45px;
  position relative;
  margin-left 6px
  margin-top: -8px;
}
</style>